<template>
    <div :class="{'editable': $data.store.conf.editable}">
        <div class="w-100 p-2 d-flex justify-content-left item-align-center" v-if="$attrs.toolBarGroup.showToolBar">
            <x-cmpnt-renders :cmpnts="$attrs.toolBarGroup.children" :data="{}"></x-cmpnt-renders>


        </div>
        <el-table v-bind="$attrs" :data="tableData" :size="$attrs.size">
            <el-table-column v-if="$attrs.allowMuitiSelection" type="selection"  width="55" />
            <el-table-column type="expand" v-if="$attrs.detailFields && $attrs.detailFields.length > 0">
                <template #default="scope">
                    <el-row :gutter="24">
                        <template v-for="field in $attrs.detailFields" :key="field">
                            <el-col :span="5" class="text-end py-1">{{ field.title }}:</el-col>
                            <el-col :span="7" class="text-start py-1">
                                <span v-if="field.colorTag == 'color'"
                                    :class="$utils.conv.getTextColor(scope.row[field.name])"
                                    v-x-bind="{ fieldId: field.fieldId, value: scope.row[field.name] }"></span>
                                <el-tag v-else-if="field.colorTag == 'tag'"
                                    :type="$utils.conv.getTypeColor(scope.row[field.name])"
                                    v-x-bind="{ fieldId: field.fieldId, value: scope.row[field.name] }"></el-tag>
                                <span v-else v-x-bind="{ fieldId: field.fieldId, value: scope.row[field.name] }"></span>
                            </el-col>
                        </template>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column v-for="field in $attrs.listFields" :key="field.name" show-overflow-tooltip
                :prop="field.name" align="center" :label="field.title">
                <template #default="scope">
                    <span v-if="field.colorTag == 'color'" :class="$utils.conv.getTextColor(scope.row[field.name])"
                        v-x-bind="{ fieldId: field.fieldId, value: scope.row[field.name] }"></span>
                    <el-tag v-else-if="field.colorTag == 'tag'" :type="$utils.conv.getTypeColor(scope.row[field.name])"
                        v-x-bind="{ fieldId: field.fieldId, value: scope.row[field.name] }"></el-tag>
                    <span v-else v-x-bind="{ fieldId: field.fieldId, value: scope.row[field.name] }"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" v-if="$attrs.operationBarGroup.showOperationBar">
                <template #default="scope">
                    <div class="opts">
                        <x-cmpnt-renders :cmpnts="$attrs.operationBarGroup.children" :data="scope.row"></x-cmpnt-renders>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="w-100 p-2 d-flex justify-content-end item-align-center">
            <el-pagination v-if="$attrs.showPagination" :currentPage="pagination.pi" :page-size="pagination.ps"
                :page-sizes="[10, 20, 30, 50, 100]" :background="false" :size="$attrs.size"
                layout="total,sizes,prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs } from 'vue';
import $utils from 'xcore/utils';
import $data,{ onFormQueryResult, emitFormQueryRequest } from "xcore/data"
const tableData = ref([])
const attr = useAttrs()
const pagination = reactive({ pi: 1, ps: 10, total: 10 })
onMounted(() => {
    onFormQueryResult((attr.DbTable as any).id, (res, pg) => {
        pagination.total = res.count;
        pagination.pi = pg.pi;
        pagination.ps = pg.ps;
        tableData.value = res.data
    });
})



const handleSizeChange = (val: number) => {
    if (val == pagination.ps) return;
    pagination.ps = val;
    emitFormQueryRequest((attr.DbTable as any).id, pagination);
}
const handleCurrentChange = (val: number) => {
    if (val == pagination.pi) return;
    pagination.pi = val;
    emitFormQueryRequest((attr.DbTable as any).id, pagination);
}

</script>

<style scoped>
:deep(th) {
    font-weight: 800 !important;
}
.opts > :deep( .el-button + .el-button) {
    margin-left: 0px;
}


.editable :deep(.el-table .cell){
    overflow: visible !important;
}
 :deep(.el-table .el-table__cell){
    position:static !important;
}
</style>